<template>
  <div class="index-main">
    <!-- top区域 -->
    <div class="top-container">
      <el-menu
        class="el-menu-horizontal-demo"
        mode="horizontal"
        background-color="#262626"
        text-color="#AEAEAE"
      >
        <el-menu-item index="1" class="icon">
          <a href="#/admin/myinfo/message">
            <i class="el-icon-chat-square"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="2" class="icon">
          <a href="#/admin/myinfo/myindex">
            <i class="el-icon-user"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="3" class="icon">
          <a href="#/admin/myinfo/collection">
            <i class="el-icon-collection-tag"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="4" class="icon">
          <a href="#/admin/myinfo/upload">
            <i class="el-icon-upload"></i>
          </a>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 搜索区域 -->
    <div class="select_search">
      <el-row>
        <el-col :offset="17" span="3">
          <el-select placeholder="选择类别" v-model="formLabelAlign.typeid">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-col>
        <el-col span="4">
          <el-input
            type="text"
            suffix-icon="iconfont el-icon-search"
            id="search"
            v-model="formLabelAlign.goodname"
          ></el-input>
        </el-col>
      </el-row>
    </div>
    <!-- 主体部分 -->
    <div class="index-buttom">
      <div class="classes">
        <div class="text">
          <span class="chinese" v-bind:typename="typename">环境</span>
          <span class="english">Environment-3D</span>
          <a href="#/admin/index"><i class="el-icon-arrow-right"></i></a>
        </div>
        <div class="div_">
          <div class="div_n" v-for="n in 4" :key="n">
            <img src="../../common/picture/ZT.png" />
            <span class="floattext">名称</span>
          </div>
        </div>
        <ul class="class_ul">
          <li class="line" @click="dialogVisible = true">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>

          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
        </ul>
      </div>
      <!-- 编辑上传信息 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
        show-close="false"
        close-on-press-escape
      >
        <el-container style="background-color: #1e1e1e">
          <el-container>
            <div>
              <div style="width: 100%; height: 300px; padding-right: 15px">
                <img
                  style="width: 300px; height: 300px"
                  src="../../common/picture/ZT.png"
                  alt=""
                />
              </div>
            </div>
            <div style="width: 50%">
              <span
                style="font-family: 优设标题; font-size: 36px; color: #a2662f"
                >枕头</span
              >
              <el-container>
                <div>
                  <p
                    style="
                      font-family: 优设标题;
                      font-size: 20px;
                      color: #cecece;
                    "
                  >
                    Token ID:1122222222
                  </p>
                </div>
                <div>
                  <i
                    style="font-size: 20px; padding: 20px"
                    class="el-icon-document-copy"
                  ></i>
                </div>
              </el-container>
              <p
                style="
                  font-family: Alibaba-PuHuiTi-Bold;
                  font-size: 20px;
                  color: #cecece;
                "
              >
                拥有者:大力小丽
              </p>
              <p
                style="
                  font-family: Alibaba-PuHuiTi-Bold;
                  font-size: 20px;
                  color: #cecece;
                "
              >
                分类:3D-物品
              </p>
              <el-container>
                <div style="display: flex">
                  <span
                    style="
                      font-family: 优设标题;
                      font-size: 30px;
                      color: #cecece;
                    "
                    >转卖价格：￥5</span
                  >
                  <el-button
                    style="margin-left: 20px"
                    type="warning"
                    class="sold"
                    @click="gotoSold"
                    >转卖</el-button
                  >
                </div>
              </el-container>
            </div>
          </el-container>
          <span style="font-family: 优设标题; color: #cecece; font-size: 20px"
            >商品简介：</span
          >
          <el-footer
            style="
              width: 100%;
              height: 100px;
              border: 3px solid #666666;
              border-radius: 5px;
            "
          ></el-footer>
          <span style="font-family: 优设标题; color: #cecece; font-size: 20px"
            >历史交易记录</span
          >
          <el-footer
            style="
              width: 100%;
              height: 100px;
              border: 3px solid #666666;
              border-radius: 5px;
              display: flex;
              justify-content: space-between;
            "
          >
            <div>
              <p>日期</p>
              <p>2021-12-02</p>
            </div>
            <div>
              <p>价格</p>
              <p>￥5</p>
            </div>
            <div>
              <p>拥有者</p>
              <p>大力小丽</p>
            </div>
          </el-footer>
        </el-container>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <br />
      <div class="classes">
        <div class="text">
          <span class="chinese">艺术品-3D</span>
          <span class="english">Artwork-3D</span>
          <a href="#/admin/goods/goodsindex"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <!-- <img class="img2" src="~images/1.jpg" alt="" /> -->
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyData, getGoodDetail, doEditData } from "crm/myinfo/myinfo.js";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      formLabelAlign: {
        typeid: undefined,
        goodname: "",
      },
      //所有商品数据
      tableData: [],
      typename: [],
      typeid: [],
      goods: [
        {
          goodid: 1,
          coverurl: "",
          covername: "",
          goodstatus: 0,
          goodname: "",
          price: 0.0,
        },
      ],
      total: 0,
      //上传信息编辑
      tableEdit: [
        {
          goodid: "",
          goodurlname: "",
          price: 22.2,
          type: "",
          goodname: "",
          coverurl: "",
          covername: "",
          user: "",
          userid: "1",
          pics: [
            {
              picurl: "",
              picname: "",
            },
          ],
          documenturl: "",
          documentname: "",
          transaction: [
            {
              date: "",
              price: 12.6,
              owner: "",
            },
          ],
          introduction: "",
          tokenid: 0,
        },
      ],
    };
  },
  created() {
    this.getMygoodsData();
  },
  methods: {
    //获取页面初始化数据..
    getMygoodsData() {
      let payload = this.formLabelAlign;
      payload.userid = localStorage.getItem("userid");
      getMyData(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableData = res.data;
            this.total = this.tableData.types.length;
            for (let i = 0; i < this.total; i++) {
              this.typename[i] = this.tableData.types[i].typename;
              this.typeid[i] = this.tableData.types[i].typeid;
              this.goods[i] = this.tableData.types[i].goods;
            }
            console.log(this.typename);
            console.log(this.typeid);
            console.log(this.goods);
            // console.log(this.tableData.types[0]);
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //获取商品上传数据详情
    //获取商品详情数据
    getMygoodDetail() {
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      // payload.goodid = ??
      getGoodDetail(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableEdit = res.data;
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //提交商品上传编辑修改信息
    onSubmit() {
      this.$confirm("确认提交表单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (
            this.tableEdit.goodid !== "" &&
            this.tableEdit.price !== "" &&
            this.tableEdit.type !== "" &&
            this.tableEdit.goodname !== "" &&
            this.tableEdit.coverurl !== "" &&
            this.tableEdit.covername !== "" &&
            this.tableEdit.pics !== [] &&
            this.tableEdit.documenturl !== "" &&
            this.tableEdit.introduction !== "" &&
            this.tableEdit.documentname !== ""
          ) {
          } else {
            this.$message.info("请检查是否填写完整!");
          }
          let payload = { ...this.tableEdit };
          payload.userid = localStorage.getItem("uid");
          doEditData(payload)
            .then((res) => {
              if (res.status == "OK") {
                this.$message.success("修改成功");
                // this.$router.push("/admin/order/order");
                this.$router.back();
              }
            })
            .catch((err) => {
              EventBus.$emit("closeloading");
            });
        })
        .catch(() => {});
    },

    //点击转卖之后跳出弹出框
    gotoSold() {
      this.dialogVisible = false;
      this.dialogVisible1 = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.index-main {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0%;
  flex-direction: column;
}
.top-container {
  width: 100%;
  height: 56px;
  margin: 0%;
  padding: 0%;
  background-color: #262626;
  display: flex;
  flex-direction: row;
}
.el-menu {
  height: 55px;
  width: 300px;
  border-bottom: solid 1px #262626;
  position: relative;
  left: 40%;
}
.icon {
  width: 64px;
  height: 56px;
}
.icon i {
  font-size: 28px;
}
.select_search {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0%;
  flex-direction: row-reverse;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
/deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 5px solid #292929;
  border-radius: 20px;
  font-family: "Youshebiaotihei";
  color: #787878;
  font-size: 20px;
}
.text_note {
  font-family: "Youshebiaotihei";
}
.div_ {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 81px;
}
.div_n {
  display: inline-block;
  position: relative;
  width: calc(25%-30px);
  margin-right: 50px;
  display: inline-block;
}
/* 悬浮的文字 */
.floattext {
  position: absolute;
  bottom: 30px;
  right: 50px;
  color: #fdfdfd;
  font-family: "Youshebiaotihei";
  font-size: 30px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.index-buttom {
  width: 100%;
  height: 100%;
  margin: auto;
}
.classes {
  display: flex;
  flex-direction: column;
}
.class_ul {
  margin-top: 30px;
  margin-left: 1%;
}
.line {
  width: 23%;
  height: 300px;
  list-style-type: none;
  margin-left: 20px;
  float: left;
  /* height:200px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}

.imgclass {
  width: 30%;
  height: 120px;
}
.img2 {
  width: 30%;
  height: 120px;
  margin-bottom: 30px;
  margin-left: 0.3px;
  border-radius: 2%;
}
.text {
  display: flex;
  font-family: "Youshebiaotihei";
}
.chinese {
  color: #a2662f;
  font-size: 28px;

  margin-left: 80px;
}
.english {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 5px;
}
.sold {
  margin: 0%;
  padding: 0%;
  font-family: "Youshebiaotihei";
  background-color: #a2662f;
  border: 0px;
  font-size: 20px;
}
.el-icon-arrow-right {
  color: antiquewhite;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 8px;
}
/deep/.el-dialog__header {
  background-color: #1e1e1e;
}
/deep/.el-dialog__body {
  background-color: #1e1e1e;
}
/deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
</style>